<template>
    <div class="search-box" v-if="paramArray.length">
            <div v-for="(item, i) in paramArray" :key="i" class="search-item">
                <span class="label" v-if="item.label">{{item.label}}</span><i-input v-if="item.key == 'input'" v-model="item.value" :placeholder="item.placeholder"></i-input>
                <i-select  v-if="item.key == 'select'" v-model="item.value" :placeholder="item.placeholder">
                    <i-option v-for="(items, ii) in item.selectList" :key="ii" :value="items.value">{{items.label}}</i-option>
                </i-select>
                <DatePicker v-if="item.key == 'date'" :placeholder="item.placeholder" type="date"></DatePicker>
                <DatePicker class="start-end-date-time" v-if="item.key == 'startEndTime'" :format="item.format" :placeholder="item.placeholder" type="daterange" v-model="item.value"></DatePicker>
                <TimePicker v-if="item.key == 'timePark'" type="time" :placeholder="item.placeholder" ></TimePicker>
                <Cascader  v-if="item.key == 'cascader'" :data="item.casArray" v-model="item.value"></Cascader>
            </div>
            <div class="search-item search-item-last" v-if="reset">
                <Button type="default" @click="resets">重置</Button>
            </div>
            <div class="search-item search-item-last">
                <Button type="primary" @click="search">查询</Button>
            </div>
            <slot></slot>
    </div>
</template>
<script>
export default {
    name: 'searchBox',
    props: {
        paramArray: {
            type: Array,
            default () {
                return [
                    // {
                    //     key: 'input',
                    //     value: '',
                    //     label: '项目名称',
                    //     placeholder: '请输入项目名称',
                    //     width: '',
                    //     selectList: [],
                    //     casArray: []
                    // },
                    // {
                    //     key: 'select',
                    //     value: '',
                    //     label: '项目名称',
                    //     placeholder: '请输入项目名称',
                    //     width: '',
                    //     selectList: [{
                    //         label: '你好',
                    //         value: '1'
                    //     }],
                    //     casArray: []
                    // }
                ]
            }
        },
        reset: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        search () {
            this.$emit('search', this.getMsg())
        },
        resets () {
            this.$emit('reset', this.getMsg(false))
        },
        getMsg (status = true) {
            const {paramArray} = this
            let obj = {}
            paramArray.forEach(r => {
                if (!status) r.value = ''
                obj[r.type] = r.value
            })
            return obj
        }
    }
}
</script>
<style lang="less" scoped>
.search-box {
    width: 100%;
    overflow: hidden;
    padding-bottom: 20px;
    .search-item {
        display: inline-block;
        margin-right: 20px;
        .ivu-input-wrapper {
            width: 270px;
        }
        .ivu-select {
            width: 88px;
        }
        .start-end-date-time {
            width: 270px;
        }
        .label {
            margin-right: 10px;
        }
    }
}
</style>